// 右侧工具栏
import { Form, Tabs } from 'antd';
import React, { useEffect } from 'react';
import { debounce } from 'src/libs/utils';
import StyleIndex from './components/EditorStyleType/Index';
import DataMain from './components/EditorDataType/index';
import MutualIndex from './components/EditorMutualType/Index';
import { Scrollbars } from 'react-custom-scrollbars';
import { TYPE_CONFIG } from './topics';

interface EditRightProps {
	currentType: string;
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	children?: any;
	allConfigs?: any;
	pageId: string;
	layoutConfig: Array<any>;
	layoutConfChange: ( config ) => void;
	pageConf: any;
}

const EditReportRight = ( props: EditRightProps ) => {
	const { TabPane } = Tabs;
	const [ styleForm ] = Form.useForm();
	const [ dataForm ] = Form.useForm();
	const [ mutualForm ] = Form.useForm();

	const { currentType, config, onValuesChange, allConfigs, pageId, layoutConfig, pageConf } = props;

	const handleValuesChange = ( changedValues, allValues, configType ) => {
		console.log( changedValues, allValues, configType );

		const map = {
			style: styleForm,
			data: dataForm,
			mutual: mutualForm,
		};
		// console.log( changedValues );
		const { tilteHight, titleValue, linkHref, inputValue, containerHeight, containerWidth,
			defaultValueCustom, defaultValueCustomStart, defaultValueCustomEnd, chartBorderRadius,
			chartBorderWidth, chartBorderShadowWidth, chartBorderShadowDeviation, columnWidth,
			columnMargin, columnRadio, chartBottomPadding, chartTopPadding, chartRightPadding, 
			chartLeftPadding, tableBorderWidth, pageSize, chartXAxisName  } = changedValues;
		if (
			titleValue || linkHref || inputValue || containerHeight || containerWidth || defaultValueCustom ||
			defaultValueCustomStart || defaultValueCustomEnd || tilteHight || chartBorderRadius || chartBorderWidth ||
			chartBorderShadowWidth || chartBorderShadowDeviation || columnWidth || columnMargin || columnRadio ||
			chartBottomPadding || chartTopPadding || chartRightPadding || chartLeftPadding || tableBorderWidth || pageSize || chartXAxisName
		) {
			// 某些属性不用onchange做更新，不然会导致输入一次子组件render一次失去焦点
			return;
		}
		map[configType].validateFields().then( async ( values: any ) => {
			if ( onValuesChange ) {
				const value = {
					...values,
					...changedValues
				};
				onValuesChange( config.type, config.key, value, configType );
			}
		} );
	};

	useEffect( () => {
		styleForm.resetFields();
		dataForm.resetFields();
		mutualForm.resetFields();
	}, [ config, dataForm, mutualForm, styleForm ] );

	return (
		<>
			<Tabs style={{ height: '100%' }} type="card">
				
				{TYPE_CONFIG[currentType] && TYPE_CONFIG[currentType].indexOf( 'hiddenDataTab' ) === -1 && (
					<TabPane tab="数据" key="data">
						<Form
							layout="vertical"
							form={dataForm}
							onValuesChange={debounce(
								( changedValues, allValues ) => handleValuesChange( changedValues, allValues, 'data' ),
								500
							)}
							initialValues={config.data}
							size="small"
							key={config.key}
						>
							<DataMain
								config={config}
								form={dataForm}
								allConfigs={allConfigs}
								pageId={pageId}
								currentType={currentType}
								TYPECONFIG={TYPE_CONFIG}
								onValuesChange={onValuesChange}
							></DataMain>
						</Form>
					</TabPane>
				)}

				<TabPane tab="样式" key="style">
					<Scrollbars style={{ height: 'calc(100vh - 246px)' }}>
						<Form
							labelAlign="left"
							labelCol={{ span: 8 }}
							wrapperCol={{ span: 16 }}
							layout="horizontal"
							form={styleForm}
							onValuesChange={debounce(
								( changedValues, allValues ) => handleValuesChange( changedValues, allValues, 'style' ),
								500
							)}
							initialValues={config.style}
							size="small"
							key={config.key}
						>
							<StyleIndex
								config={config}
								styleForm={styleForm}
								currentType={currentType}
								typeconfig={TYPE_CONFIG}
								onValuesChange={onValuesChange}
								layoutConfig={layoutConfig}
								layoutConfChange={props.layoutConfChange}
							></StyleIndex>
						</Form>
					</Scrollbars>
				</TabPane>

				{TYPE_CONFIG[currentType] && TYPE_CONFIG[currentType].indexOf( 'mutual' ) !== -1 && (
					<TabPane tab="交互" key="mutual">
						<Form
							layout="horizontal"
							form={mutualForm}
							onValuesChange={debounce(
								( changedValues, allValues ) => handleValuesChange( changedValues, allValues, 'mutual' ),
								500
							)}
							initialValues={config.mutual}
							size="small"
							key={config.key}
						>
							<MutualIndex
								pageId={pageId}
								config={config}
								allConfigs={allConfigs}
								mutualForm={mutualForm}
								currentType={currentType}
								typeconfig={TYPE_CONFIG}
								onValuesChange={onValuesChange}
								deloitteFlag={pageConf.deloitteFlag}
							></MutualIndex>
						</Form>
					</TabPane>
				)}
			</Tabs>
		</>
	);
};

export default React.memo( EditReportRight );
